<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<div class="modal fade" id="ocean-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px; height: auto">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <c:choose>
                    <c:when test="${entity.id != null && entity.id!= ''}">
                        <h4 class="modal-title">编辑广告牌</h4>
                    </c:when>
                    <c:otherwise>
                        <h4 class="modal-title">新增广告牌</h4>
                    </c:otherwise>
                </c:choose>
            </div>
            <div class="modal-body">
                <div class=" form">
                    <form class="cmxform form-horizontal tasi-form" id="billboard_from" method="post"
                          data-url="resources/entity"
                          data-class="com.ocean.billboard.entity.Billboard">
                        <input type="hidden" id="entity_id" name="id" value="${entity.id}">
                        <div class="form-group">
                            <label for="code" class="control-label col-lg-2">编号 </label>
                            <div class="col-lg-10">
                                <input class="form-control" id="code" name="code" type="text" placeholder="编号"
                                       value="${entity.code}"
                                       required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="bid" class="control-label col-lg-2">广告牌ID </label>
                            <div class="col-lg-10">
                                <input  id="bid" name="bid" autocomplete="off"
                                       type="number" placeholder="广告牌ID"
                                       class="form-control" value="${entity.bid}"
                                       required maxlength="11" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ad_company____" class="control-label col-lg-2">所属公司 </label>
                            <div class="col-lg-10">
                                <input id="ad_company____" name="adCompanyId" autocomplete="off"
                                       data-provide="typeahead" type="text" placeholder="所属公司"
                                       class="form-control" value="${entity.adCompany.name}"
                                       required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="control-label col-lg-2">广告牌名称 </label>
                            <div class="col-lg-10">
                                <input id="name" name="name" autocomplete="off"
                                       type="text" placeholder="广告牌名称"
                                       class="form-control" value="${entity.name}"
                                       required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="billboardContact" class="control-label col-lg-2">联系人 </label>
                            <div class="col-lg-10">
                                <input id="billboardContact" name="billboardContact" autocomplete="off"
                                       type="text" placeholder="联系人"
                                       class="form-control" value="${entity.billboardContact}"
                                       required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="billboardMobile" class="control-label col-lg-2">联系人手机号 </label>
                            <div class="col-lg-10">
                                <input class="form-control" id="billboardMobile" name="billboardMobile" type="text" placeholder="联系电话"
                                       value="${entity.billboardMobile}"
                                       required maxlength="11" minlength="11"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="barcode" class="control-label col-lg-2">条形码 </label>
                            <div class="col-lg-10">
                                <input id="barcode" name="barcode" autocomplete="off"
                                       type="text" placeholder="条形码"
                                       class="form-control" value="${entity.barcode}"
                                       required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="contact" class="control-label col-lg-2">紧急联系人 </label>
                            <div class="col-lg-10">
                                <input id="contact" name="contact" autocomplete="off"
                                       type="text" placeholder="报警联系人"
                                       class="form-control" value="${entity.contact}"
                                       required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mobiles" class="control-label col-lg-2">报警手机号码 </label>
                            <div class="col-lg-10">
                                <input id="mobiles" name="mobiles" autocomplete="off"
                                       type="text" placeholder="报警手机号码"
                                       class="form-control" value="${entity.mobiles}"
                                       required maxlength="11" minlength="11"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cityId" class="control-label col-lg-2">所在市 </label>
                            <div class="col-lg-10">
                                <select class="form-control" id="cityId" name="cityId" onchange="districtIdSelect()"
                                        required>
                                    <option value=""></option>
                                    <c:forEach items="${city}" var="item">
                                        <option value="${item.id}"
                                                <c:if test="${entity.cityId==item.id}">selected</c:if>>${item.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="districtId" class="control-label col-lg-2">所在区 </label>
                            <div class="col-lg-10">
                                <select class="form-control" id="districtId" name="districtId"
                                        onchange="streetIdSelect()" required>
                                    <option value=""></option>
                                    <c:forEach items="${district}" var="item1">
                                        <option value="${item1.id}"
                                                <c:if test="${entity.districtId==item1.id}">selected</c:if>>${item1.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="streetId" class="control-label col-lg-2">所在街道 </label>
                            <div class="col-lg-10">
                                <select class="form-control" id="streetId" name="streetId" required>
                                    <option value=""></option>
                                    <c:forEach items="${street}" var="item2">
                                        <option value="${item2.id}"
                                                <c:if test="${entity.streetId==item2.id}">selected</c:if>>${item2.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="location" class="control-label col-lg-2">门牌号或其他 </label>
                            <div class="col-lg-10">
                                <input class="form-control" id="location" name="location" type="text"
                                       placeholder="门牌号或其他"
                                       value="${entity.location}"
                                       required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="installMethod" class="control-label col-lg-2">安装方式 </label>
                            <div class="col-lg-10">
                                <select class="form-control" id="installMethod" name="installMethod" required>
                                    <option value=""></option>
                                    <option value="HAND_FIX"
                                            <c:if test="${entity.installMethod=='HAND_FIX'}">selected</c:if>>手动安装
                                    </option>
                                    <option value='MACHINE_FIX'
                                            <c:if test="${entity.installMethod=='MACHINE_FIX'}">selected</c:if>>机械安装
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="installTime" class="control-label col-lg-2">安装年代 </label>
                            <div class="col-lg-10">
                                <c:choose>
                                    <c:when test="${entity.installTime == null}">
                                        <jsp:useBean id="now" class="java.util.Date"/>
                                        <input class="form-control" id="installTime" name="installTime" type="date"
                                               value="<fmt:formatDate value='${now}' type="date" pattern="yyyy-MM-dd"/>"
                                               required>
                                    </c:when>
                                    <c:otherwise>
                                        <input class="form-control" id="installTime" name="installTime" type="date"
                                               value="<fmt:formatDate value='${entity.installTime}' type="date" pattern="yyyy-MM-dd"/>"
                                               required>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="material" class="control-label col-lg-2">材质 </label>
                            <div class="col-lg-10">
                                <select class="form-control" id="material" name="material" required>
                                    <option value=""></option>
                                    <option value="PC_BOARD"
                                            <c:if test="${entity.material=='PC_BOARD'}">selected</c:if>>PC板
                                    </option>
                                    <option value='KT_BOARD'
                                            <c:if test="${entity.material=='KT_BOARD'}">selected</c:if>>KT板
                                    </option>
                                    <option value='PP_BOARD'
                                            <c:if test="${entity.material=='PP_BOARD'}">selected</c:if>>PP板
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="area" class="control-label col-lg-2">面积 </label>
                            <div class="col-lg-10">
                                <input class="form-control" id="area" name="area" type="text" placeholder="面积"
                                       value="${entity.area}"
                                       required maxlength="6"/>
                            </div>
                        </div>
                        <input type="hidden" name="status" value="true">
                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-10">
                                <button class="btn btn-success" type="button" onclick="addValue()">Save
                                </button>
                                <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var validator = $("#billboard_from").validate();
    $(function () {
        $('#ad_company____').autocomplete({
            source: function (query, process) {
                var matchCount = 20;
                $.post("resources/adCompany/autoComplete", {"str": query, "top": matchCount}, function (respData) {
                    if (!respData) {
                        alert('输入的公司名称不存在');
                    }
                    return process(respData);
                });
            },
            formatItem: function (item) {
                return item["name"];
            },
            setValue: function (item) {
                return {'data-value': item["name"], 'real-value': item["id"]};
            }
        });
    });

    function districtIdSelect() {
        $('#districtId').empty();
        $('#streetId').empty();
        var parentId = $('#cityId').val();
        WaitingDialog.show();
        $.post("resources/billboardAddress/child", {parentId: parentId, level: 2}, function (data) {
            WaitingDialog.dismiss();
            loadDistrictId(data);
        });
    }

    function streetIdSelect() {
        $('#streetId').empty();
        var parentId = $('#districtId').val();
        WaitingDialog.show();
        $.post("resources/billboardAddress/child", {parentId: parentId, level: 3}, function (data) {
            WaitingDialog.dismiss();
            loadStreetId(data);
        });
    }

    function loadDistrictId(data) {
        $('#districtId').append('<option value=""></option>');
        $.each(data, function (index, item) {
            $('#districtId').append('<option value="' + item.id + '">' + item.name + '</option>');
        });
    }

    function loadStreetId(data) {
        $('#streetId').append('<option value=""></option>');
        $.each(data, function (index, item) {
            $('#streetId').append('<option value="' + item.id + '">' + item.name + '</option>');
        });
    }
    function addValue() {
        $("#ad_company____").val($("#ad_company____").attr("real-value"));
        formSubmit(validator);
    }
</script>